<template>
  <NuxtLink
    external
    :to="$localePath(`/goods/${discountGoodsInfo.goodsSku?.goods?.urlName || discountGoodsInfo.goodsSku?.goods?.id}`)"
    class="cursor-pointer group rounded-md lg:w-[200px] w-[110px] overflow-hidden trans">
    <div class="relative">
      <y-image
        lazy
        class="h-[110px] mx-auto lg:h-[200px] rounded-md duration-300 trans-target origin-bottom"
        :src="$withPicOrigin(discountGoodsInfo.goodsSku?.goods?.smallIcon || discountGoodsInfo.goodsSku?.smallIcon)"
        height="200px"
        :alt="`how to top up ${discountGoodsInfo.goodsSku?.goods?.name}`" />
      <!-- 阴影 -->
      <div class="absolute bottom-0 left-1.5">
        <span class="bg-[#15AA7F] text-xs text-white px-1 rounded-sm">
          - {{ discountGoodsInfo?.goodsSku?.discount }}%
        </span>
        <h3 class="line-clamp-1 hidden lg:block text-white lg:text-sm">
          {{ discountGoodsInfo.goodsSku?.goods?.name }}
        </h3>
        <div class="lg:flex items-center hidden text-sm">
          <p class="text-red1 ltr:mr-2 rtl:ml-2 font-mono group-hover:underline">
            {{ $calcPrice(discountGoodsInfo?.goodsSku?.price) }}
          </p>
          <p class="text-[rgba(255,255,255,0.5)] font-mono line-through">
            {{ $calcPrice(discountGoodsInfo?.goodsSku?.originalPrice) }}
          </p>
        </div>
      </div>
    </div>
    <h4 class="line-clamp-1 lg:hidden text-white3">{{ discountGoodsInfo.goodsSku?.goods?.name }}</h4>
  </NuxtLink>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'

const props = defineProps<{
  discountGoodsInfo: any
  isDetail?: boolean
}>()

// const bgColor = computed(() => {
//   return props.discountGoodsInfo?.goods?.bgColor || 'rgba(55, 70, 70, 0.4)'
// })
</script>

<style scoped lang="scss">
// .item-bg {
//   background: url('assets/images/item-bg.svg') v-bind(bgColor);
// }

.trans:hover {
  .trans-target {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
</style>
